<template>
    <div class="container">
        <!-- <div class="bg-white rounded-lg shadow p-6"> -->
        <!-- 搜索区 -->
        <!-- <div class="flex items-center mb-6"> -->
        <el-row :gutter="20" class="mb-6">
            <el-col :span="6"> <el-input v-model="searchName" placeholder="请输入患者姓名" :prefix-icon="Search" /></el-col>
            <el-col :span="6">
                <el-date-picker v-model="searchDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="width: 95%;" />
            </el-col>
            <el-col :span="6">
                <el-select v-model="searchStatus" placeholder="预约状态">
                    <el-option label="全部" value="" />
                    <el-option label="待确认" value="pending" />
                    <el-option label="已确认" value="confirmed" />
                    <el-option label="已取消" value="cancelled" />
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" class="!rounded-button whitespace-nowrap">
                    <el-icon>
                        <Search />
                    </el-icon>
                    搜索
                </el-button>
                <el-button class="!rounded-button whitespace-nowrap">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-col>

        </el-row>
        <!-- </div> -->

        <!-- 操作按钮 -->
        <el-row class="flex justify-between mb-6">
            <el-col :span="12">
                <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="addAppointment">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增预约
                </el-button>
                <el-button type="danger" class="!rounded-button whitespace-nowrap">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    批量删除
                </el-button>
            </el-col>
            <el-col :span="6">
                <el-button type="success" class="!rounded-button whitespace-nowrap">
                    <el-icon>
                        <Upload />
                    </el-icon>
                    导出数据
                </el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table :data="tableData" stripe>
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column label="患者姓名" prop="name" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="联系电话" prop="phone" />
            <el-table-column label="预约项目" prop="type">
                <template #default="{ row }">
                    <el-tag :type="getTypeTag(row.type)">{{ row.type }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="预约时间" prop="time" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button type="primary" link class="!rounded-button whitespace-nowrap">
                        <el-icon>
                            <View />
                        </el-icon>
                        查看
                    </el-button>
                    <el-button type="primary" link class="!rounded-button whitespace-nowrap">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" link class="!rounded-button whitespace-nowrap">
                        <el-icon>
                            <Close />
                        </el-icon>
                        取消
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="flex justify-end mt-4">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" />
        </div>
        <!-- </div> -->
    </div>

    <el-drawer v-model="addAppointmentDrawer" title="新增预约" direction="rtl" size="50%">
        <template #header>
            <h2>新增预约</h2>
        </template>

        <el-steps :active="activeStep" finish-status="success" class="mb-8">
            <el-step title="选择医生" />
            <el-step title="选择时间" />
            <el-step title="填写信息" />
            <el-step title="确认预约" />
        </el-steps>

        <!-- 第一步：选择医生 -->
        <div v-if="activeStep === 0">
            <el-form :model="bookingForm" label-width="100px">
                <el-form-item label="科室">
                    <el-select v-model="bookingForm.department" placeholder="请选择科室" class="w-full">
                        <el-option label="产科门诊" value="产科门诊" />
                        <el-option label="妇科门诊" value="妇科门诊" />
                    </el-select>
                </el-form-item>
                <el-form-item label="医生">
                    <el-select v-model="bookingForm.doctor" placeholder="请选择医生" class="w-full">
                        <el-option v-for="doctor in doctors" :key="doctor.id" :label="doctor.name" :value="doctor.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <!-- 第二步：选择时间 -->
        <div v-if="activeStep === 1" class="grid grid-cols-1 gap-6">
            <div>
                <el-calendar v-model="selectedDate" />
            </div>
            <div>
                <h3 class="font-medium  text-lg mb-4">可预约时间段</h3>
                <div class="grid grid-cols-2 gap-4">
                    <el-button v-for="time in availableTimes" :key="time.value"
                        :type="bookingForm.time === time.value ? 'primary' : 'default'"
                        @click="bookingForm.time = time.value" class="!rounded-button whitespace-nowrap">
                        {{ time.label }}
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 第三步：填写信息 -->
        <div v-if="activeStep === 2">
            <el-form :model="bookingForm" label-width="100px">
                <el-form-item label="患者姓名">
                    <el-input v-model="bookingForm.patientName" />
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="bookingForm.phone" />
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="bookingForm.idCard" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="bookingForm.notes" type="textarea" :rows="3" />
                </el-form-item>
            </el-form>
        </div>

        <!-- 第四步：确认信息 -->
        <div v-if="activeStep === 3">
            <div class="bg-gray-50 p-6 rounded-lg">
                <h3 class="font-medium mb-4">预约信息确认</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-gray-600 mb-2">科室：{{ bookingForm.department }}</p>
                        <p class="text-gray-600 mb-2">医生：{{ getSelectedDoctorName() }}</p>
                        <p class="text-gray-600 mb-2">预约日期：{{ formatDate(selectedDate) }}</p>
                        <p class="text-gray-600 mb-2">预约时间：{{ bookingForm.time }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600 mb-2">患者姓名：{{ bookingForm.patientName }}</p>
                        <p class="text-gray-600 mb-2">联系电话：{{ bookingForm.phone }}</p>
                        <p class="text-gray-600 mb-2">身份证号：{{ bookingForm.idCard }}</p>
                        <p class="text-gray-600 mb-2">备注：{{ bookingForm.notes }}</p>
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handlePrev" v-if="activeStep > 0" class="!rounded-button whitespace-nowrap">
                    上一步
                </el-button>
                <el-button type="primary" @click="handleNext" v-if="activeStep < 3"
                    class="!rounded-button whitespace-nowrap">
                    下一步
                </el-button>
                <el-button type="primary" @click="handleConfirm" v-if="activeStep === 3"
                    class="!rounded-button whitespace-nowrap">
                    确认预约
                </el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import {
    Calendar,
    Monitor,
    Document,
    Aim,
    Search,
    Plus,
    Delete,
    Upload,
    View,
    Edit,
    Close,
    SwitchButton,
    Refresh
} from '@element-plus/icons-vue';

import { ElMessage } from 'element-plus';
const swiperModules = [Pagination, Autoplay];
const searchName = ref('');
const searchDate = ref();
const searchStatus = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

const tableData = ref([
    {
        name: '张晓华',
        age: 28,
        phone: '13812345678',
        type: '产检',
        time: '2024-01-20 09:30',
        status: '待确认'
    },
    {
        name: '李美琳',
        age: 32,
        phone: '13987654321',
        type: 'B超',
        time: '2024-01-20 10:30',
        status: '已确认'
    },
    {
        name: '王淑芳',
        age: 29,
        phone: '13567891234',
        type: '唐筛',
        time: '2024-01-20 14:00',
        status: '已取消'
    },
    {
        name: '刘雅婷',
        age: 31,
        phone: '13678901234',
        type: 'DNA无创',
        time: '2024-01-21 09:00',
        status: '待确认'
    },
    {
        name: '陈思敏',
        age: 27,
        phone: '13598765432',
        type: '产检',
        time: '2024-01-21 10:30',
        status: '已确认'
    }
]);

const getStatusType = (status) => {
    switch (status) {
        case '待确认':
            return 'warning';
        case '已确认':
            return 'success';
        case '已取消':
            return 'danger';
        default:
            return 'info';
    }
}

const getTypeTag = (type) => {
    const typeMap = {
        '产检': 'primary',
        'B超': 'success',
        '唐筛': 'warning',
        'DNA无创': 'info'
    };
    return typeMap[type] || 'default';
}

//新增预约
const  addAppointmentDrawer= ref(false)
const addAppointment=(doctor)=>{
    addAppointmentDrawer.value=true
    bookingForm.value.doctor = doctor.id;
    bookingForm.value.department = '产科门诊'
}

const doctors = ref([
    {
        id: 1,
        name: '张晓华',
        title: '主任医师',
        expertise: '高危妊娠、产科疑难病例',
        schedule: '周一、周三上午',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/58f9bf45cb0f8400f6f8e1185d6795a5.jpg'
    },
    {
        id: 2,
        name: '李美玉',
        title: '副主任医师',
        expertise: '妊娠期并发症、产科手术',
        schedule: '周二、周四上午',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/cda4ad6fc59b761196ac73ca8954e820.jpg'
    },
    {
        id: 3,
        name: '王思琪',
        title: '主治医师',
        expertise: '产前诊断、胎儿医学',
        schedule: '周三、周五上午',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/35353e6c8b85ca54dcfc20987a31aaa8.jpg'
    },
    {
        id: 4,
        name: '陈慧敏',
        title: '主治医师',
        expertise: '自然分娩、产后康复',
        schedule: '周一、周五下午',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/540584734605cbf5543c83492ec75936.jpg'
    }
]);

//预约步骤
const activeStep = ref(0)
//选择医生
const bookingForm = ref({
    department: '',
    doctor: '',
    time: '',
    patientName: '',
    phone: '',
    idCard: '',
    notes: ''
})
//选择预约日期
const selectedDate = ref(new Date())
//可预约时间段
const availableTimes = ref([
    { label: '09:00-09:30', value: '09:00' },
    { label: '09:30-10:00', value: '09:30' },
    { label: '10:00-10:30', value: '10:00' },
    { label: '10:30-11:00', value: '10:30' },
    { label: '14:00-14:30', value: '14:00' },
    { label: '14:30-15:00', value: '14:30' },
    { label: '15:00-15:30', value: '15:00' },
    { label: '15:30-16:00', value: '15:30' }
])


const handleNext = () => {
    if (activeStep.value < 3) {
        activeStep.value += 1;
    }
};

const handlePrev = () => {
    if (activeStep.value > 0) {
        activeStep.value -= 1;
    }
};

const handleConfirm = () => {
    ElMessage.success('预约成功！');
    addAppointmentDrawer.value = false;
    activeStep.value = 0;
}
const getSelectedDoctorName = () => {
    const doctor = doctors.value.find(d => d.id === bookingForm.value.doctor);
    return doctor ? doctor.name : '';
}
const formatDate = (date) => {
    return new Date(date).toLocaleDateString('zh-CN');
}
</script >
<style lang="less" scoped>

</style>